<template>
  <div class="detailContainer">
    <!-- 详情头部 -->
    <div class="detailHeader">
      <div class="svg">
        <!-- 上面回退的图标 -->
        <div class="pre" @touchstart="backOff">
          <svg
            t="1641113930550"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2168"
            width="26"
            height="32"
          >
            <path
              d="M361.932146 511.99386l381.351428-381.341195c14.95869-14.944364 14.95869-39.187511 0-54.14313-14.95562-14.95869-39.187511-14.95869-54.143131 0l-408.426063 408.411736c-14.95562 14.95869-14.95562 39.187511 0 54.144155l408.426063 408.426063c7.478322 7.478322 17.275455 11.217483 27.072589 11.217482 9.79611 0 19.59222-3.739161 27.070542-11.217482 14.95869-14.95562 14.95869-39.187511 0-54.143131L361.932146 511.99386z"
              fill="#eee"
              p-id="2169"
            ></path>
          </svg>
        </div>
        <!-- 点击分享的图标 -->
        <!-- <van-cell is-link > -->
        <div class="share" @click="show = true">
          <svg
            t="1641114020331"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4187"
            width="26"
            height="32"
          >
            <path
              d="M365.604792 262.10044l127.792525-127.793548 0.152473 503.227196c0.004093 11.014868 8.934486 19.943215 19.949354 19.943215 0.002047 0 0.004093 0 0.00614 0 11.016915-0.004093 19.947308-8.937556 19.943215-19.954471l-0.152473-503.100306 127.675868 127.676891c3.89675 3.89675 8.999978 5.843078 14.106276 5.843078 5.104251 0 10.212596-1.948375 14.106276-5.842055 7.79043-7.79043 7.79043-20.422122 0-28.212552L527.85306 72.555479c-3.638877-3.870144-8.791224-6.300496-14.521738-6.300496-0.002047 0-0.004093 0-0.00614 0-0.00614 0-0.01228 0.001023-0.01842 0.001023-0.00614 0-0.01228-0.001023-0.01842-0.001023-5.291516 0-10.364045 2.101871-14.106276 5.842055L337.39224 233.886865c-7.789407 7.79043-7.789407 20.422122 0 28.212552C345.18267 269.89087 357.814362 269.89087 365.604792 262.10044zM782.507924 315.087235 642.713041 315.087235c-11.016915 0-19.949354 8.931416-19.949354 19.949354s8.93244 19.949354 19.949354 19.949354l139.794883 0c38.498826 0 69.821205 31.322379 69.821205 69.821205l0 425.443645c0 38.498826-31.322379 69.821205-69.821205 69.821205L246.009973 920.071999c-38.498826 0-69.821205-31.322379-69.821205-69.821205L176.188768 424.806125c0-38.498826 31.322379-69.821205 69.821205-69.821205l143.936203 0c11.017938 0 19.949354-8.931416 19.949354-19.949354s-8.931416-19.949354-19.949354-19.949354L246.009973 315.086212c-60.499909 0-109.718891 49.220005-109.718891 109.718891l0 425.443645c0 60.499909 49.220005 109.718891 109.718891 109.718891l536.49795 0c60.499909 0 109.718891-49.220005 109.718891-109.718891L892.226814 424.806125C892.227838 364.306216 843.007833 315.087235 782.507924 315.087235z"
              p-id="4188"
              fill="#eee"
            ></path>
          </svg>
        </div>
        <!-- </van-cell> -->
        <van-popup
          position="bottom"
          round
          v-model="show"
          :style="{ height: '30%' }"
        >
          <div class="fenxiang">
            <p>分享</p>
            <svg
              t="1641198584539"
              class="icon"
              viewBox="0 0 1049 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6534"
              width="48"
              height="48"
            >
              <path
                d="M2.778359 0zM763.377135 502.533926q-15.744776-3.155041-20.445007-9.433743t-1.57752-11.548515l3.15504-5.237482q1.04027-1.04027 2.114772-3.155041t4.197212-8.929773 4.733512-13.630005 2.61779-16.785046-0.5363-18.900768-6.311983-19.404738-13.126986-18.900768q-14.703556-14.703556-38.305506-18.900768t-47.202949-0.5363-44.582307 9.433744-34.612263 11.012215l-13.630005 6.311983q-10.507294 3.155041-17.323247 4.197213t-10.507294-0.5363-5.774733-3.155041-1.57752-7.352253 1.040269-9.970044 2.61779-13.126986 3.155041-14.167256q0-12.588784-1.57752-23.600048t-6.815003-24.641269-15.208476-22.023478-25.17947-13.630005-39.346727-3.155041-54.554251 12.588784q-36.727034 12.588784-74.494339 37.231004t-65.564564 51.397309-50.89429 51.935511-35.686765 40.924246l-11.548515 16.785046q-34.612263 45.120508-51.397309 90.240066t-15.744776 68.185207v22.023479q6.311984 50.357039 30.952302 90.240065t58.750513 64.524295 80.269071 41.964516 88.662545 25.179471 89.703765 11.012215q77.651281 6.311984 161.042112-12.052485t155.269281-63.484025T849.383855 693.395834q17.826266-36.727034 18.364468-69.258758t-11.012215-52.97578-29.912032-36.190734-34.612263-23.09703-28.83753-9.433743zM443.405781 828.816314q-113.303814 5.237482-192.500285-44.079288t-79.19457-124.852328q0-74.494338 78.691551-128.51229t193.036585-59.287764 193.036585 37.767304 78.69155 117.500075q0 75.53651-80.269071 135.864543t-191.459064 65.564565zM412.99073 538.186459q-30.415051 3.155041-54.554252 14.167256t-37.767304 25.17947-23.097029 30.415051-13.126986 31.993522-4.733512 28.837531-1.04027 20.445007l1.04027 8.393474v4.197212q0 3.155041 2.114771 12.588784t5.774733 17.323248 12.052484 17.323247 19.941989 15.744777q69.258758 33.571993 129.04859 20.445007t96.517817-60.327083q14.703556-17.826266 19.404737-44.079287t-2.114771-52.975781-23.600048-48.779518-49.820739-34.109245-76.073761-6.815002z m-37.769206 198.308299q-6.311984 1.04027-12.052484 0.5363t-10.507294-2.114771-9.433744-3.65806-7.855272-5.774733-5.774733-7.352253-4.197212-8.393474-1.577521-9.970043q0-11.548515 6.311984-22.559779t17.323248-18.900768 24.641268-8.929774q9.433743-1.04027 18.364468 0.5363t15.208477 5.237482 11.012215 8.393474 6.815002 11.012215 2.114771 13.630005q0 11.548515-6.815002 22.023479t-18.364468 17.826266-25.179471 8.393474z m89.166515-75.53651q-7.352253 5.237482-15.208476 4.733513t-11.012215-6.815003l-2.114771-4.197212q-1.04027-2.114771-1.04027-4.197213v-4.197212q0-3.155041 1.04027-5.237482l2.114771-4.197212q1.04027-2.114771 3.155041-3.155041l3.155041-4.197213q8.393474-6.311984 16.248746-5.237482t11.012214 8.393474q3.155041 4.197212 2.617791 9.433744t-3.155041 9.970043-6.815003 8.929774z m372.443165-219.289606q6.311984 0 11.548515-3.155041t8.393474-7.855272 4.197212-9.970043q1.04027-1.04027 1.04027-3.155041 12.588784-119.615797-83.929984-136.400843-28.334511-5.237482-52.471811-1.04027-7.352253 0-12.588784 3.65806t-8.929774 9.433743-3.658059 12.052485q0 10.507294 7.352253 17.826266t17.826266 7.352253q81.847542-18.900768 88.125294 52.471811 2.114771 17.826266-2.114771 33.571993 0 10.507294 7.352253 17.826267t17.826267 7.352253z m-17.826266-295.833104q-46.160778-10.507294-123.812059 4.197212-1.04027 0-2.114771 1.04027l-1.04027 2.114771-1.04027 1.040269q-11.548515 3.155041-18.900768 13.126986t-7.352253 21.518559q0 15.744776 10.507294 26.21974t25.179471 10.507294h3.155041q1.04027 0 4.733512-1.04027t7.855272-1.57752 8.929774-2.114771 8.393474-3.155041 14.167255-1.577521 25.715771 1.577521 33.571993 7.855272 36.727034 15.744776 36.727035 26.21974 31.993522 38.808525q27.294242 61.906505 10.507294 119.615797 0 1.04027-0.5363 2.114771t-1.57752 5.237482-2.114772 7.855272-2.114771 9.433744-1.04027 9.970043q0 9.433743 5.237482 15.744776t13.126987 8.929774 18.364468 2.61779q29.375732 0 34.612263-35.686765 12.588784-40.924247 14.167255-78.15525t-5.237482-65.564565-20.445007-52.97578-31.489552-41.964517-39.883026-31.489552-42.501768-22.559778-42.501767-13.630005z"
                p-id="6535"
                fill="#ff6700"
              ></path>
            </svg>
          </div>
        </van-popup>
      </div>
      <!-- 轮播图
        <img src="./images/1.jpg" />
        :autoplay="1000"
       -->
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
        <van-swipe-item
          v-for="detailItem in detailSwiperList"
          :key="detailItem.img_url"
        >
          <img :src="detailItem.img_url" />
        </van-swipe-item>
      </van-swipe>
      <!-- 商品的价格等 -->
      <div class="detailPrice">
        <div class="price">
          <i>¥</i>
          <p>{{phoneObj ? phoneObj.price : '89999'}}</p>
        </div>
        <div class="zhong">
          <p>预计得540米金</p>
          <h4>查看</h4>
        </div>
        <!-- 
          https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/84d5f1a65f4223e8fe1b076e93876441.png
         -->
        <!-- 点击跳转到 全部商品列表 -->
        <div class="detail-list" @touchstart="toCategory">
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/84d5f1a65f4223e8fe1b076e93876441.png"
            alt=""
          />
          <span>来这里，发现属于你的新品</span>
          <svg
            t="1641140293640"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="15454"
            width="18"
            height="18"
          >
            <path
              d="M612.219 515.297L230.02 894.085a33.516 33.516 0 0 0-0.138 47.493l11.868 11.914a33.792 33.792 0 0 0 47.647 0.144l418.068-414.31a33.577 33.577 0 0 0 0.144-47.514L291.999 75.028c-13.123-13.143-34.473-13.21-47.647-0.138l-11.94 11.843a33.546 33.546 0 0 0-0.143 47.519l379.95 381.045z"
              p-id="15455"
              fill="#bfbfbf"
            ></path>
          </svg>
        </div>
      </div>
    </div>
    <!-- 手机详情 -->
    <div class="detailPhone">
      <h1>{{phoneObj.name}}</h1>
      <div>
        <p>
          「新品热卖中！至高享24期免息；评论晒单前5000名赠50元红包；+749元得MiCare保障服务」
        </p>
      </div>
      <ul>
        <li>
          <span>
            <svg
              t="1641121680523"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7770"
              width="16"
              height="16"
            >
              <path
                d="M512 64C264.576 64 64 264.576 64 512c0 247.422 200.576 448 448 448 247.422 0 448-200.578 448-448C960 264.576 759.422 64 512 64zM593.63 755.834l-107.18 0L486.45 384.388l-68.612 37.82-27.47-89.816 119.986-64.226 83.278 0L593.632 755.834z"
                fill="#bfbfbf"
                p-id="7771"
              ></path>
            </svg>
          </span>
          <span>【性能跃升】全新一代 骁龙8 移动平台</span>
        </li>
        <li>
          <span>
            <svg
              t="1641121773077"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="8201"
              width="16"
              height="16"
            >
              <path
                d="M512 64c-247.296 0-448 200.704-448 448s200.704 448 448 448 448-200.704 448-448-200.704-448-448-448zM355.84 759.296v-70.144l52.736-55.296c95.744-97.792 141.312-154.624 141.312-211.968 0-40.96-19.456-61.44-57.344-61.44-29.184 0-56.32 16.896-73.728 30.72l-20.48 16.384-36.864-87.552 11.264-9.728c35.328-29.184 83.968-46.08 133.632-46.08 48.64 0 88.576 15.872 115.712 46.08 23.552 26.624 36.864 63.488 36.864 103.936 0 94.208-69.12 172.032-139.776 243.2l-4.608 4.608h153.6v97.28h-312.32z"
                fill="#bfbfbf"
                p-id="8202"
              ></path>
            </svg>
          </span>
          <span>【专业影像】5000万超清三主摄，让拍摄体验焕然新生</span>
        </li>
        <li>
          <span>
            <svg
              t="1641121799531"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="8680"
              width="16"
              height="16"
            >
              <path
                d="M592.64 488.2c17.36-9.33 29.49-19.65 36.4-30.94 6.91-11.29 10.36-29.63 10.36-55.02 0-37.52-9.61-66.83-28.84-87.92s-55.81-31.64-109.76-31.64c-43.12 0-74.57 7.61-94.36 22.82s-29.68 44.47-29.68 87.78v38.64h113.12v-37.24c0-17.36 1.45-28.7 4.34-34.02 2.89-5.32 8.26-7.98 16.1-7.98 6.91 0 11.99 2.52 15.26 7.56 3.27 5.04 4.9 15.49 4.9 31.36v25.2c0 14.75-1.4 25.57-4.2 32.48-2.8 6.91-7.37 11.39-13.72 13.44-6.35 2.05-22.96 3.08-49.84 3.08v65.8c22.03 0.37 36.87 1.82 44.52 4.34 7.65 2.52 13.44 7.79 17.36 15.82 3.92 8.03 5.88 20.72 5.88 38.08v31.36c0 28.37-1.4 45.92-4.2 52.64-2.8 6.72-8.59 10.08-17.36 10.08-8.03 0-13.21-2.66-15.54-7.98-2.33-5.32-3.5-17.78-3.5-37.38v-73.64H376.76v35.84c0 43.12 3.22 73.41 9.66 90.86 6.44 17.45 19.88 32.2 40.32 44.24s48.58 18.06 84.42 18.06c31.55 0 57.4-5.18 77.56-15.54 20.16-10.36 34.35-25.48 42.56-45.36s12.32-47.83 12.32-83.86c0-48.53-4.2-79.38-12.6-92.54s-21.19-22.63-38.36-28.42zM512 960C264.58 960 64 759.42 64 512S264.58 64 512 64s448 200.58 448 448-200.58 448-448 448z"
                fill="#bfbfbf"
                p-id="8681"
              ></path>
            </svg>
          </span>
          <span>【疾速快充】120W 小米澎湃秒充</span>
        </li>
      </ul>
    </div>
    <!-- 手机的配置信息 -->
    <div class="detailConfig">
      <van-swipe :loop="false" :show-indicators="false" :width="100">
        <van-swipe-item>
          <img
            src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f0c04e138bfed2b1ebb589de615236d1.png"
            alt=""
          />
          <h5>CPU</h5>
          <p>全新一代 骁龙8 移动平台</p>
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://i8.mifile.cn/b2c-mimall-media/7692726e7a1dd34a3b1b4ede8aca020d.png"
            alt=""
          />
          <h5>三摄像头</h5>
          <p>5000万像素+5000万像素+5000万像素</p>
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://i8.mifile.cn/b2c-mimall-media/86a3bd46cf4f7f19daa2c3250cf30604.png"
            alt=""
          />
          <h5>超大屏</h5>
          <p>6.73英寸</p>
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://i8.mifile.cn/b2c-mimall-media/a5ab24dcb527e49f970f13b11e000ab1.png"
            alt=""
          />
          <h5>屏幕分辨率</h5>
          <p>3200x1440</p>
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://i8.mifile.cn/b2c-mimall-media/c8ec0829241324e401744da627482560.png"
            alt=""
          />
          <h5>极速畅玩</h5>
          <p>最高12GB</p>
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://i8.mifile.cn/b2c-mimall-media/8941adac25333e785b9cc78ca11f4f27.png"
            alt=""
          />
          <h5>存储容量</h5>
          <p>最高256GB</p>
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://i8.mifile.cn/b2c-mimall-media/d1b67a407fb2a1ed42c2c0ce15af3318.png"
            alt=""
          />
          <h5>运营商网络</h5>
          <p>5G 双卡 | 全网通 7.0</p>
        </van-swipe-item>
      </van-swipe>
      <!-- 只是单纯的一句话 -->
      <div class="detailCharts">
        <svg
          t="1641136983914"
          class="icon"
          viewBox="0 0 1093 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="13283"
          width="16"
          height="16"
        >
          <path
            d="M106.972283 261.620003c0 29.779863-23.943326 53.973913-53.486141 53.973913-29.535218 0-53.486142-24.069448-53.486142-53.973913 0-29.784422 23.826322-53.972393 53.486142-53.972393 29.542816 0.243126 53.486142 24.312573 53.486141 53.972393zM600.643642 94.834231c0 29.784422-23.949404 53.972393-53.49222 53.972393-29.535218 0-53.486142-24.069448-53.486141-53.972393 0-29.779863 23.950924-53.973913 53.486141-53.973913 29.422772 0.118524 53.49222 24.194049 53.49222 53.973913zM1093.822671 261.620003c0 29.779863-24.069448 53.973913-53.486141 53.973913-29.542816 0-53.367618-24.069448-53.367618-53.973913 0-29.784422 23.949404-53.972393 53.367618-53.972393 29.535218 0.243126 53.486142 24.312573 53.486141 53.972393z m-867.838822 570.372969h619.239722c26.015973 0 48.382021-18.603677 53.367617-44.370446l77.55559-402.49769c3.651445-19.08385-17.989785-32.700411-33.429789-20.905774l-177.600308 136.515099L563.931657 211.048331c-8.267794-11.913161-25.772847-12.156287-34.283768-0.361649L329.680013 486.62983l-182.830551-128.370387c-15.076834-10.571411-35.496357 2.065049-32.825013 20.424081l58.228613 406.263099c3.89457 26.988476 26.74687 47.046349 53.730787 47.046349z m670.660814 114.87235c0 20.425601-16.406428 36.956631-36.705907 36.956631H218.083782c-20.182475 0-36.713505-16.53103-36.713505-36.956631 0-20.418003 16.412506-40.719002 36.713505-40.719001h641.854974c20.418003 0.120043 36.705907 20.419522 36.705907 40.719001z m0 0"
            p-id="13284"
            fill="#ff6700"
          ></path>
        </svg>
        <i>【小米手机热销榜】第1名</i>
        <svg
          t="1641140293640"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="15454"
          width="18"
          height="18"
        >
          <path
            d="M612.219 515.297L230.02 894.085a33.516 33.516 0 0 0-0.138 47.493l11.868 11.914a33.792 33.792 0 0 0 47.647 0.144l418.068-414.31a33.577 33.577 0 0 0 0.144-47.514L291.999 75.028c-13.123-13.143-34.473-13.21-47.647-0.138l-11.94 11.843a33.546 33.546 0 0 0-0.143 47.519l379.95 381.045z"
            p-id="15455"
            fill="#ff6700"
          ></path>
        </svg>
      </div>
    </div>
    <!-- 底部选择 -->
    <DetailFooter :phoneObj="phoneObj" />
  </div>
</template>

<script>
import DetailFooter from "@/pages/Detail/DetailFooter";
import { mapActions, mapState } from "vuex";
import {reqDetailPhone} from '@/api'
export default {
  name: "Detail",
  data() {
    return {
      show: false,
      //传递过来对应ID 的 手机信息
      phoneObj : {},
      //得到全部手机信息列表
      phoneList:[],
     
    };
  },
  components: { DetailFooter },
  mounted() {
    
    this.getDetailSwiper();

    this.getHomeDetailId();
    
  },
  computed: {
    ...mapState({
      detailSwiperList: (state) => state.detail.detailSwiperList,
    }),
    //路由传的id
    changeId(){
      return this.id = this.$route.params.id
    }
  },
 
  methods: {
    ...mapActions(["getDetailSwiper"]),
    //点击顶部按钮回退一步
    backOff() {
      this.$router.go(-1);
    },
    //跳转到商品列表
    toCategory() {
      this.$router.push("/category");
    },
    //获取home点击传递的id对应的对象
    async getHomeDetailId(){
     
      let result = await reqDetailPhone()
      //解构出来 手机全部信息
      let {parts}  = result.detail.data.hotParts
      // console.log(parts)
      let phoneObj = parts.find(item => {
          return item.product_id == this.changeId
        })
        this.phoneObj = phoneObj
    }
  },
};
</script>

<style lang="less" scoped>
.detailContainer {
  // position: relative;
  //详情头部
  .detailHeader {
    width: 100%;
    height: 5.2rem;
    border-bottom: 0.02rem solid rgb(221, 198, 198);
    // 点击分享按钮的弹框
    .fenxiang {
      font-size: 0.28rem;
      text-align: center;
      line-height: 0.8rem;
    }

    // 返回上一级
    .pre {
      width: 0.4rem;
      height: 0.4rem;
      background-color: rgba(74, 74, 74, 0.3);
      border-radius: 50%;
      text-align: center;
      line-height: 0.6rem;
      position: fixed;
      left: 0.15rem;
      top: 0.1rem;
      z-index: 1;
    }
    // 点击分享
    .share {
      width: 0.4rem;
      height: 0.4rem;
      background-color: rgba(74, 74, 74, 0.3);
      border-radius: 50%;
      text-align: center;
      line-height: 0.6rem;
      position: fixed;
      right: 0.15rem;
      top: 0.1rem;
      z-index: 1;
    }
    // 轮播图
    .my-swipe .van-swipe-item {
      width: 100%;
      height: 3.8rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    // 价格等
    .detailPrice {
      .price {
        margin: 0.1rem;
        color: #ff6700;
        font-weight: 700;
        font-family: Avenir, Arial, sans-serif;
        i {
          font-size: 0.15rem;
        }
        p {
          display: inline-block;
          vertical-align: top;
          font-size: 0.28rem;
          margin-left: 0.03rem;
        }
      }
      .zhong {
        height: 0.3rem;
        margin: 0 0.2rem;
        display: flex;
        justify-content: space-between;
        background-color: rgba(255, 103, 0, 0.15);
        color: rgba(255, 103, 0);
        border-radius: 0.03rem;
        p {
          margin: 0.06rem;
          height: 0.15rem;
          border: 0.01rem solid rgba(255, 103, 0, 0.7);
          line-height: 0.15rem;
          border-radius: 0.03rem;
        }
        h4 {
          height: 0.2rem;
          width: 0.35rem;
          line-height: 0.2rem;
          margin: 0.06rem;
          text-align: center;
          background-color: rgba(255, 103, 0, 1);
          color: #eee;
          border-radius: 0.03rem;
        }
      }
      // 点击跳转到全部商品
      .detail-list {
        display: flex;
        justify-content: space-between;
        height: 0.2rem;
        line-height: 0.2rem;
        margin: 0.15rem;
        img {
          height: 100%;
        }
      }
    }
  }
  //手机详情
  .detailPhone {
    padding: 0.15rem;
    border-bottom: 0.01rem solid rgb(245, 239, 239);
    h1 {
      margin-bottom: 0.1rem;
    }
    p {
      margin-bottom: 0.05rem;
    }
    ul li {
      height: 0.2rem;
      line-height: 0.2rem;
      vertical-align: top;
    }
  }
  //手机的配置信息
  .detailConfig {
    text-align: center;
    margin-top: 0.15rem;
    // margin-left: 0.1rem;
    img {
      width: 0.2rem;
      height: 0.2rem;
    }
    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .detailCharts {
      height: 0.3rem;
      line-height: 0.3rem;
      display: flex;
      justify-content: space-evenly;
      vertical-align: top;
      border-radius: 0.1rem;
      font-size: 0.16rem;
      margin: 0.15rem;
      background-color: rgba(255, 103, 0, 0.4);
      .icon {
        margin-top: 0.08rem;
      }
    }
  }
}
</style>